Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: 头像裁剪组件 #2570

Merged
merged 23 commits into from
Oct 18, 2023
Merged

feat: 头像裁剪组件 #2570

merged 23 commits into from
Oct 18, 2023

Conversation

yi-boide
Copy link
Contributor

@yi-boide yi-boide commented Sep 18, 2023

这个 PR 做了什么? (简要描述所做更改)
类似微信中的头像裁剪功能组件

这个 PR 是什么类型? (至少选择一个)

  • 新特性提交
  • 日常 bug 修复
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 代码重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

这个 PR 涉及以下平台:

  • NutUI 4.0 H5
  • NutUI 4.0 小程序
  • NutUI 3.0 H5
  • NutUI 3.0 小程序

这个 PR 是否已自测:

@codecov
Copy link

codecov bot commented Sep 18, 2023

Codecov Report

Attention: 93 lines in your changes are missing coverage. Please review.

Comparison is base (90976e9) 84.99% compared to head (2b605fb) 84.92%.

Additional details and impacted files
@@            Coverage Diff             @@
##               v4    #2570      +/-   ##
==========================================
- Coverage   84.99%   84.92%   -0.08%     
==========================================
  Files         151      152       +1     
  Lines       20720    21172     +452     
  Branches     2323     2377      +54     
==========================================
+ Hits        17611    17980     +369     
- Misses       3104     3187      +83     
  Partials        5        5              
Files Coverage Δ
src/packages/__VUE/avatarcropper/index.vue 79.42% <79.42%> (ø)

... and 2 files with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

| btnsPosition | 裁剪区域工具栏位置,可选值为:`top` `bottom` | string | bottom |
| editText | 中间的文字内容 | string | 编辑 |
| cancelText | 取消按钮的文字 | string | 取消 |
| cancelConfirm | 确认按钮的文字 | string | 确认 |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

文档 API 中统一使用 kebab-case 风格

@@ -0,0 +1 @@
export type BtnsPosition = 'top' | 'bottom';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

类型名称需要调整为组件名开头,比如 AvatarCropperxxx

| ------------- | ------------------------------------------- | ------ | ------ |
| maxZoom | 最大缩放倍数 | number | 3 |
| space | 裁剪区域两边预留的间隙 | number | 10 |
| btnsPosition | 裁剪区域工具栏位置,可选值为:`top` `bottom` | string | bottom |
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

建议将 btns 整体调整为更语义化的 toolbar:
1、prop btnsPosition -> toolbar-position
2、slot bottom -> toolbar
3、类型名称 BtnsPosition -> AvatarCropperToolbarPosition
4、与之相关的 class 名称等等

@@ -0,0 +1,451 @@
<template>
<view class="nut-avatar-cropper" :data-edit-text="editText">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

H5 组件的 view 标签需要统一调整为 div 标签。
某些其他 H5 组件内依然有使用 view 标签,主要是有一些历史原因暂时保留。

@eiinu eiinu linked an issue Sep 19, 2023 that may be closed by this pull request
@eiinu eiinu merged commit 359a355 into jdf2e:v4 Oct 18, 2023
3 of 5 checks passed
@yi-boide yi-boide deleted the avatar branch November 7, 2023 02:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

图片裁剪组件
2 participants